<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="../../css/bootstrap.min.css" rel="stylesheet">

    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=d8lYtR0dDwG2GMgz1FtlwFXcneAYXHkV"></script>
    <script type="text/javascript" src="http://developer.baidu.com/map/jsdemo/demo/convertor.js"></script>

    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="../../js/bootstrap.min.js"></script>

    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
    <!--[if lt IE 9]>
    <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
    <style type="text/css">
        a {
            color: #000000;
        }

        a,
        a:hover,
        a:link,
        a:visited {
            text-decoration: none;
        }

        .sel {
            background: none;
            text-align: center;
            font-size: 16px;
            margin: 8px -15px 10px 20px;
            padding: 10px 0 17px 8px;
            border-color: #ccc;
        }

        .top-img {
            width: 20px;
            height: 18px;
            vertical-align: sub;
        }

        .top-sel {
            font-size: 16px;
            line-height: 60px;
            vertical-align: middle;
            cursor: pointer;
        }

        .jj_top-menu {
            position: relative;
            padding-right: 15px;
            padding-left: 15px;
            margin-right: auto;
            margin-left: auto;
        }

        .breadcrumb {
            font-size: 24px;
            background-color: inherit;
        }

        .breadcrumb li {
            padding: 0 15px;
            font-size: 18px;
            font-weight: 600;
        }

        .left-tag {
            position: relative;
            left: 17%;
            height: 55px;
            padding-top: 10px;
        }

        .right-tag {
            position: relative;
            left: 50%;
            height: 55px;
            padding-top: 10px;
        }

        .right-tag span {
            padding-right: 20px;
        }

        .menu {
            position: relative;
            left: 23%;
            top: -15px
        }

        .menu li {
            text-align: center;
            padding-right: 60px;
            width: 200px;
        }
        .welcome_username{
            position: relative;
            display: inline-block;
            height: 22px;
            line-height: 22px;
            margin-left: 5px;
            cursor: pointer;
        }
    </style>

</head>
<body>

<nav class="navbar navbar-default">
    <!-- 第一段 -->
    <div id="nowcity" >
        <span></span>
    </div>
    <div class="left-tag pull-left">
        <span class="nowcity glyphicon glyphicon-map-marker"></span>
        <a href="#"><span>切换城市</span></a>
    </div>
    <div class="right-tag">
        <span id="welcome">欢迎回来</span>
        <span class="welcome_username">
            <div class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">张三
					<b class="caret"></b>
				</a>
                <ul class="dropdown-menu">
                    <li><a href="#">个人中心</a></li>
                    <li><a href="#">我的简历</a></li>
                    <li><a href="#">我的收藏</a></li>
                    <li><a href="#">消息通知</a></li>
                    <li><a href="#">退出</a></li>
                </ul>
            </div>
        </span>
    </div>
    <!-- 第二段 -->
    <div class="jj_top-menu">
        <div class="container jj_top-menu" style="height: 100px;">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <a class="navbar-brand" href="#"><img src="../../img/icon.png" style="margin: -12px;padding-left: 120px;"></a>
            </div>

            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="top-list1">
                <div class="nav navbar-nav">
                    <select class="sel">
                        <option>职位</option>
                        <option>公司</option>
                    </select>
                </div>
                <form class="navbar-form navbar-left">
                    <div class="form-group">
                        <input type="text" class="form-control" placeholder="请输入关键词,例如:JAVA,销售代表,行政助理等" style="border-radius: 0px; width:575px;height: 48px ;border-left: none;">
                    </div>
                    <button type="submit" class="btn btn-default" style="height: 48px;">搜索</button>
                </form>
                <div class="top-sel pull-left" onclick="fun1()">
                    <span>导航</span>
                    <img title="导航" src="../../img/top-list.png" class="top-img">
                </div>
            </div><!-- /.navbar-collapse -->

            <div class="top-list2" style="display:none; ">
                <div class="pull-left" style="width: 730px;height: 50px;">
                    <ul class="breadcrumb" style="background-color:inherit">
                        <li><a href="#">主页</a></li>
                        <li><a href="#" class="nowcity">城市</a></li>
                        <li><a href="#">企业</a></li>
                        <li><a href="#">论坛</a></li>
                    </ul>
                </div>
                <div class="top-sel pull-left" onclick="fun2()" style="height: 50px;">
                    <span>搜索</span>
                    <img title="导航" src="../../img/top-list.png" class="top-img">
                </div>
                <<<<<<< HEAD
                <button type="submit" class="btn btn-default">搜索</button>
                </form>
                <div class="top-sel pull-left" onclick="fun1()">
                    <span>导航</span>
                    <img title="导航" src="../../img/top-list.png" class="top-img">
                </div>
            </div><!-- /.navbar-collapse -->

            <div class="top-list2" style="display:none; ">
                <div class="pull-left" style="width: 800px;height: 50px;">
                    <ul class="breadcrumb" style="background-color:inherit">
                        <li><a href="#">首页</a></li>
                        <li><a href="#">第二页</a></li>
                        <li><a href="#">第二页</a></li>
                        <li><a href="#">第二页</a></li>
                        <li><a href="#">第二页</a></li>
                    </ul>
                </div>
                <div class="top-sel pull-left" onclick="fun2()" style="height: 50px;">
                    <span>搜索</span>
                    <img title="导航" src="../../img/top-list.png" class="top-img">
                    =======
                    >>>>>>> 0ad957bab300f126b47085116b82a3f86dab7915
                </div>
            </div>
        </div>
        <!-- 第三段 -->
        <div class="nav menu">
            <ul class="nav nav-tabs">
                <li role="presentation" class="active"><a href="#">主页</a></li>
                <li role="presentation" ><a href="#" class="nowcity">城市</a></li>
                <li role="presentation"><a href="#">企业</a></li>
                <li role="presentation"><a href="#">论坛</a></li>
            </ul>
        </div>
    </div>
</nav>


<script type="text/javascript">
    function fun1() {
        $("div.top-list1")[0].style.display = "none";
        $("div.top-list2")[0].style.display = "block";
    }

    function fun2() {
        $("div.top-list1")[0].style.display = "block";
        $("div.top-list2")[0].style.display = "none";
    }
    $(document).scroll(function() {
        var scroH = $(document).scrollTop(); //滚动高度
        if (scroH > 190) { //距离顶部大于100px时
            $(".jj_top-menu").css({
                "position": "fixed",
                "left": "160px",
                "top": "10px"
            });
        }
        if (scroH < 190) { //距离顶部大于100px时
            $(".jj_top-menu").css({
                "position": "relative",
                "left": "0",
                "top": "0"
            });
        }
    });
</script>
<script type="text/javascript" src="../../js/getlocation.js"></script>
</body>

</html>
